<template>
    <div class="goods-container">
        <div class="wrap">

            <!-- 面包屑 -->
            <crumb :nav="nav"/>

            <!-- 广告 -->
            <div class="adv">
                <img src="@/assets/img/banner.4c6b6225.png" alt="">
            </div>

            <!-- 筛选栏 -->
            <div class="tabs-container mb20">
                <label>排序:</label>
                <ul class="sort-ul">
                    <li 
                        v-for="(item,index) in sortList" 
                        :key="index"
                        :class="sortIndex==index?'tabAvtive':''" 
                        @click="sortClick(item,index)"
                    >{{item.txt}}</li>
                </ul>
            </div>
            <div class="tabs-container mb20">
                <label>分类:</label>
                <ul class="sort-ul">
                    <li 
                        v-for="(item,index) in cateList" 
                        :key="index" 
                        :class="cateIndex==index?'tabAvtive':''"
                        @click="typeClick(item,index)"
                    >{{item.txt}}</li>
                </ul>
            </div>

            <!-- 商品列表 -->
            <goods-list :goodsData="goodsShowList" />

            <p class="loading" v-if="goodsShowList!=0" >{{ isReachBottom ?'已经到底啦！': '正在加载...' }}</p>
        </div>
    </div>
</template>

<script>
    // 请求api
    import { getProducts } from '@/request/goodsApi'
    // 工具函数
    import {getScrollTop,getClientHeight,getScrollHeight} from '@/utils'
    // 组价相关
    import crumb from '@/components/common/crumb'
    import goodsList from '@/components/common/goods-list'
    export default {
        name: '',
        components: {
            crumb,
            goodsList  
        },
        data() {
            return {
                // 面包屑
                nav: [{name: "首页", link: "#"},{name: "全部礼品", link: "#"}],
                // 筛选栏数据
                sortList: [
                    { min: 0, max: 10000, txt: "全部" },
                    // "我还可以兑换"的max值是Header组件的coin值
                    { min: 0, max: 0, txt: "我还可以兑换" },
                    { min: 0, max: 500, txt: "0-500分" },
                    { min: 500, max: 1000, txt: "500-1000分" },
                    { min: 1000, max: 1500, txt: "1000-1500分" },
                    { min: 1500, max: 2500, txt: "1500-2500分" },
                    { min: 2500, max: 6500, txt: "2500-6500分" },
                    { min: 6500, max: 10000, txt: "6500-10000分" }
                ],
                cateList: [
                    { type: 0, txt: "全部" },
                    { type: 1, txt: "实体商品" },
                    { type: 2, txt: "虚拟商品" }
                ],
                sortIndex: 0, // 两个index主要用来高亮选中项样式
                cateIndex: 0,
                // 列表查询参数
                queryParams:{  
                    did: 0,      //  栏目 目前可提供的参数是 1->精品推荐 2-> 热门兑换 0->全部, 也就是从首页的顶栏点击过来就要切换这个参数
                    type: 0,     //  1->实体商品 2->虚拟商品 0->全部 
                    min: 0,      //  大于多少积分，最少是0
                    max: 10000,  //  少于多少积分，最多是10000，当传入0的时候，会直接返回所有商品，无视后台逻辑。
                    keyword: ''  //  搜索关键字
                },
                // 商品列表全部数据
                goodsData:[],
                // 真正要显示是数组
                goodsShowList:[], 
                // 模拟页数和每页条数
                page: 1,
                size: 8,
                // 是否加载中
                isLoading: false,
                // 是否到底部
                isReachBottom: false
            };
        },
        created() {
            this.queryParams.did = this.$route.query.did || 0
            this.queryParams.keyword = this.$route.query.keyword || ''
            this.hdGetProducts()
        },
        mounted(){
            window.addEventListener('scroll',this.scrollFn)
        },
        beforeDestroy(){
            window.removeEventListener('scroll')
        },
        methods:{
            // 滚动事件，页面滚动就会触发
            scrollFn(){
                //console.log( getScrollTop() + getClientHeight(),getScrollHeight())

                if( getScrollTop() + getClientHeight() >= getScrollHeight()- 150 ){  //页面差不多触底
                    
                    console.log(this.goodsShowList.length , this.goodsData.length)

                    if(this.goodsShowList.length >= this.goodsData.length){
                        this.isReachBottom = true
                        return
                    }

                    if(!this.isLoading){

                        this.isLoading = true //设为正在加载，不让下一个触底进来

                        setTimeout(()=>{
                            this.page++
                            for (var i = this.size*(this.page -1); i < this.size*this.page ; i++) {
                                this.goodsData[i] ? this.goodsShowList.push(this.goodsData[i]) : ''
                            }

                            this.isLoading = false  //加载完成设为false

                        },500)
                    }
                    
                }
            },
            // 请求列表数据方法抽取
            async hdGetProducts(){
                let res = await getProducts(this.queryParams)
                this.goodsData = res.data
                this.goodsShowList = this.goodsData.filter((item,index)=> index<8 )
                this.page = 1
                this.size =  8,
                this.isLoading = false
                this.isReachBottom = false
            },
            // 排序
            sortClick({max,min},index){
                this.sortIndex = index
                this.queryParams.max = max
                this.queryParams.min = min
                this.hdGetProducts()
            },
            // 分类
            typeClick({type},index){
                this.cateIndex = index
                this.queryParams.type = type
                this.hdGetProducts()
            }
        },
        watch:{
            "$route.query.keyword":{
                handler(newVal,oldVal){
                    if(newVal!=oldVal){
                        this.$router.go(0)
                    }
                }
            }
        }
    }
</script>

<style scoped lang="less">
@import url("../../assets/css/public.less");
    .goods-container {
        padding-top: 1px;
        width: 100%;
        background-color: #F5F5F5;

        .wrap {

            .title-left {
                margin-top: 30px;
                display: flex;
                align-items: flex-end;
                font-size: 16px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                color: #666666;

                p {
                    margin-left: 10px;
                    cursor: pointer;
                }

                .avtive{
                    font-size: 12px;
                    color: black;
                }
            }

            .adv {
                height: 180px;
                background: #FFB089;
                margin-bottom: 30px;
            }
            .tabs-container{
                display: flex;
                align-items: center;

                label{
                    font-family: SourceHanSansSC-Bold;
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 23px;
                    letter-spacing: 0px;
                    color: #333333;
                    padding-right: 14px;
                    box-sizing: border-box;
                }

                .sort-ul{
                    display: flex;
                    li{
                        padding-right: 26px;
                        font-family: SourceHanSansSC-Light;
                        font-size: 16px;
                        font-weight: normal;
                        letter-spacing: 0px;
                        color: #999999;
                        box-sizing: border-box;
                        cursor: pointer;
                    }

                    .tabAvtive{
                        font-weight:700;
                        color: @base-color;
                    }
                }
            }

            .loading{
                padding-bottom: 20px;
                text-align: center;
            }
        }
    }
</style>